<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>客户管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="${ctx}/resources/layuimini/lib/layui-v2.6.3/css/layui.css" media="all">
</head>
<body style="margin: 10px">
<!--查询条件开始-->
<blockquote class="layui-elem-quote">
    <form class="layui-form" id="searchFrm" lay-filter="searchFrm">
        <div class="layui-form-item" id="chooseUser">
            <label class="layui-form-label">选择业务员</label>
            <div class="layui-input-inline">
                <select name="userId" lay-verify="required" id="userId">
                    <option value="">请选择业务员</option>
                </select>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户姓名</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入客户姓名" name="name" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">客户电话</label>
                <div class="layui-input-inline">
                    <input type="text" placeholder="请输入客户电话" name="phone" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch">查询</button>
                <button type="reset" class="layui-btn layui-btn-danger">重置</button>
            </div>
        </div>
        </div>
    </form>
</blockquote>
<!--查询条件结束-->

<!--数据表格开始-->
<div>
    <table class="layui-hide" id="customerTable" lay-filter="customerTable"></table>
    <script type="text/html" id="customerTableToolbar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="add" >添加</button>
            <button class="layui-btn layui-btn-sm layui-btn-warm" lay-event="change" id="changeCustomer">客户转移</button>
        </div>
    </script>
    <script type="text/html" id="customerTableRowBar">
        <a class="layui-btn layui-btn-xs" lay-event="update">修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
        <a class="layui-btn layui-btn-xs" lay-event="showVisitLog">查看拜访记录</a>
    </script>
</div>
<!--数据表格结束-->
<!--添加修改弹出层开始-->
<div id="customerLayer" style="display: none;margin: 8px">
    <form class="layui-form" id="dataFrm" lay-filter="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">客户姓名</label>
            <div class="layui-input-block">
                <!--修改时要提交一个ID到后台-->
                <input type="hidden" name="id">
                <input type="text" name="name" placeholder="请输入登陆名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户电话</label>
            <div class="layui-input-block">
                <input type="text" name="phone" placeholder="请输入真实电话" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">客户公司</label>
            <div class="layui-input-block">
                <input type="text" name="company" placeholder="请输入真实名称" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色</label>
            <div class="layui-input-block">
                <input type="radio" value="1" name="sex" title="男" checked>
                <input type="radio" value="0" name="sex" title="女">
            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="doAddSubmit">保存</button>
            <button type="reset" class="layui-btn layui-btn-danger">重置</button>
        </div>
    </form>
</div>
<!--添加修改弹出层结束-->

<%--拜访客户弹出层开始--%>
<div id="VisitCustomerLog" style="display: none;margin: 8px">
    <form class="layui-form" id="visitFrm" lay-filter="visitFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">拜访时间</label>
            <div class="layui-input-block">
                <!--修改时要提交一个ID到后台-->
                <input type="hidden" name="id">
                <input type="text" name="visitTime" readonly lay-verify="required" id="visitTime"
                       placeholder="请选择拜访时间" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">拜访内容</label>
            <div class="layui-input-block">
                <textarea name="descp" class="layui-textarea" lay-verify="required"></textarea>
            </div>
            <div class="layui-form-item" style="text-align: center">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="doSaveSubmit">保存</button>
            </div>
        </div>
        <div>
            <table class="layui-hide" id="visitTable" lay-filter="visitTable"></table>
        </div>
    </form>

</div>
<%--拜访客户弹出层结束--%>

<%--转移客户业务员名单--%>
<div id="customerChangeLayer" style="display: none;margin: 8px">
    <form class="layui-form" id="cusFrm" lay-filter="cusFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">选择业务员</label>
            <div class="layui-input-block" id="userName">

            </div>
        </div>
        <div class="layui-form-item" style="text-align: center">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="doChangeSubmit">确认</button>
        </div>
    </form>
</div>
<%--转移客户业务员名单--%>

</body>
<script src="${ctx}/resources/layuimini/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="${ctx}/resources/layuimini/js/lay-config.js?v=1.0.4" charset="utf-8"></script>

<script>
    layui.use(['form', 'layer', 'table', 'jquery', 'laydate'], function () {
        let form = layui.form;
        let table = layui.table;
        let layer = layui.layer;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        //渲染数据表格
        let customerTable = table.render({
            elem: '#customerTable'
            , url: '${ctx}/customer/queryCustomer.action'
            , toolbar: '#customerTableToolbar' //开启头部工具栏，并为其绑定左侧模板
            , title: '客户数据表' //excel导出的文件名
            , height: 'full-200'
            , cols: [[
                {type: "checkbox"}
                , {field: 'id', title: 'ID', align: "center"}
                , {field: 'name', title: '客户姓名', align: "center"}
                , {field: 'phone', title: '电话', align: "center"}
                , {field: 'realname', title: '业务员', align: "center"}
                , {field: 'company', title: '客户公司', align: "center"}
                , {
                    field: 'sex', title: '性别', align: "center", templet: function (d) {
                        let str = "";
                        if (d.sex == 1) {
                            str = "<font color='blue'>男</font>"
                        } else if (d.sex == 0) {
                            str = "<font color='red'>女</font>"
                        }
                        return str;
                    }
                }
                , {
                    field: 'deleted', title: '客户状态', align: "center", templet: function (d) {
                        let str = "";
                        if (d.deleted == 1) {
                            str = "<font color='blue'>有效</font>"
                        } else if (d.deleted == 2) {
                            str = "<font color='red' >无效</font>"
                        }
                        return str;
                    }
                }
                , {field: 'createTime', title: '创建时间', align: "center"}
                , {field: 'updateTime', title: '更新时间', align: "center"}
                , {field: 'deleteTime', title: '删除时间', align: "center"}
                , {fixed: 'right', title: '操作', align: "center", toolbar: '#customerTableRowBar', width: 249}
            ]]
            , page: true
        });


        $.get("${ctx}/query/toALLUser.action", function (res) {
            let users = res.data;
            let html = $("#userId").html();
            $.each(users, function (index, item) {
                html += "<option value='" + item.id + "'>" + item.realname + "</option>"
            })
            $("#userId").html(html);
            form.render("select");
        })
        //监听查询按钮的点击
        form.on("submit(doSearch)", function (data) {
            let params = data.field;
            console.log(params);
            customerTable.reload({
                //每次模糊查询 都回到第一页
                page: {
                    curr: 1
                },
                //查询条件
                where: params
            })
        })
        //
        //头工具栏事件
        table.on('toolbar(customerTable)', function (obj) {
            switch (obj.event) {
                case "add":
                    openAddcustomerLayer();
                    break;
                case "change":
                    openChangeCustomerLayer();
                    break;
            }
            ;
        });
        //监听行工具事件
        table.on('tool(customerTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                doDeleteCustomer(data);
            } else if (obj.event === 'update') {
                openUpdatecustomerLayer(data);
            } else if (obj.event === 'showVisitLog') {
                showVisitCustomerLog(data);
            }
        });

        let index = 0;

        let url = "";

        function showVisitCustomerLog(data) {
            index = layer.open({
                type: 1,
                area: ['700px', '600px'],
                content: $("#VisitCustomerLog"),
                title: '添加【' + data.name + '】的拜访记录',
                success: function () {
                    $("#visitFrm")[0].reset();
                    laydate.render({
                        elem: "#visitTime",
                        type: 'datetime'
                    });
                    let visitTable = table.render({
                        elem: '#visitTable'
                        , url: '${ctx}/visitLog/visitCustomer.action?customerId=' + data.id
                        , toolbar: '#visitTableToolbar' //开启头部工具栏，并为其绑定左侧模板
                        , title: '客户数据表' //excel导出的文件名
                        , cols: [[
                            {field: 'realname', title: '业务员', align: "center"}
                            , {field: 'descp', title: '拜访内容', align: "center"}
                            , {field: 'visitTime', title: '拜访时间', align: "center"}
                            , {field: 'createTime', title: '创建时间', align: "center"}
                        ]]
                        , page: true
                    });
                    form.on("submit(doSaveSubmit)", function (obj) {
                        let param = obj.field;
                        param.name = data.name;
                        param.customerId=data.id;
                        $.post("${ctx}/visitLog/addVisitLog.action", param, function (res) {
                            layer.msg(res.msg)
                            if (res.code == 200) {
                                $("#visitFrm")[0].reset();
                                visitTable.reload();
                            }
                            return false;
                        })
                    })
                }
            })
        }

        function openChangeCustomerLayer() {
            //检测是否选择了用户
            let checkStatus = table.checkStatus("customerTable");
            let data = checkStatus.data;
            console.log(data)
            if (data.length == 0) {
                layer.msg("请选择至少一个用户");
                return;
            }
            index = layer.open({
                type: 1,
                title: '转移客户名单',
                content: $("#customerChangeLayer"),
                area: ['400px', '300px'],
                success: function () {
                    $.get("${ctx}/query/toALLUser.action", function (res) {
                        let users = res.data;
                        let html = "";
                        $.each(users, function (index, item) {
                            html += "<input type='radio' value='" + item.id + "' name='userId' title='" + item.realname + "'>"
                        })
                        $("#userName").html(html);
                        form.render("radio");
                    })
                }
            })
        }

        //监听转移客户确认按钮
        form.on("submit(doChangeSubmit)", function (obj) {
            let data2 = obj.field;
            if (data2.userId) {
                console.log(data2);
            } else {
                layer.msg("请选择业务员")
            }
            let checkStatus = table.checkStatus("customerTable");
            let data = checkStatus.data;
            let params = "userId=" + data2.userId
            $.each(data, function (index, item) {
                params += "&customerId=" + item.id
            })
            $.post("${ctx}/customer/changeCustomer.action", params, function (res) {
                if (res.code == 200) {
                    layer.msg(res.msg);
                    customerTable.reload();
                    layer.close(index)
                } else {
                    layer.msg(res.msg);
                }
            })
        })

        //新建客户档案
        function openAddcustomerLayer(data) {
            index = layer.open({
                type: 1,
                content: $("#customerLayer"),
                area: ['700px', '500px'],
                title: '新建客户档案',
                success: function () {
                    $("#dataFrm")[0].reset();
                    url = "${ctx}/customer/addCustomer.action"
                }
            })
        }

        //修改客户档案
        function openUpdatecustomerLayer(data) {
            index = layer.open({
                type: 1,
                content: $("#customerLayer"),
                area: ['700px', '500px'],
                title: '修改客户档案',
                success: function () {
                    form.val("dataFrm", data)
                    url = "${ctx}/customer/updateCustomer.action"
                }
            })
        }

        //监听添加/修改保存按钮的点击
        form.on("submit(doAddSubmit)", function (data) {
            let param = data.field;
            $.post(url, param, function (res) {
                if (res.code == 200) {
                    layer.msg(res.msg);
                    customerTable.reload();
                    layer.close(index)
                } else {
                    layer.msg(res.msg);
                }
            })
        })

        function doDeleteCustomer(data) {
            layer.confirm("你确定要删除【" + data.name + "】的客户吗", function (index) {
                $.post("${ctx}/customer/deleteCustomer.action", {id: data.id}, function (res) {
                    if (res.code == 200) {
                        layer.msg(res.msg);
                        customerTable.reload();
                        layer.close(index);
                    } else {
                        layer.msg(res.msg)
                    }
                })
            })
        }

        let role=${user.role}
        if(role==2){
            $("#changeCustomer").hide()
            $("#chooseUser").hide()
        }
    })
</script>
</html>